<template>
  <div class="tiles-map" v-bind:style="imagesStyle">
    <tile-show
      v-for="(tile, index) in tiles"
      v-bind:key="'tile' + index"
      v-bind:style="[imageStyle, imageExtraStyle]"
      v-bind:borders="borders(index)"
      v-bind:hover-border-enabled="hoverBorderEnabled"
      v-bind:selected-style="selectedStyle(index)"
      v-bind:src="tileSrc(tile)"
      v-on:on-click="clickHandler(index)"
      v-on:on-mouse-down="mousedownHandler(index)"
      v-on:on-mouse-enter="mouseenterHandler(index)"
      v-on:on-mouse-up="mouseupHandler(index)"
      v-on:on-keydown="keydownHandler(index)"
      v-on:on-copy="copyHandler(index)"
      v-on:on-paste="pasteHandler(index)">
      <template v-slot:images>
        <slot name="images" v-bind:index="index" v-bind:item="tile"></slot>
      </template>
      <template v-slot:props>
        <!-- 数据集tiles中，如果没有正确指定objectsIndex字段，则无法正确返回index值 -->
        <slot name="props" v-bind:index="index" v-bind:objects-index="tile.objectsIndex"></slot>
      </template>
    </tile-show>
  </div>
</template>

<script src="./tilesMap.js"></script>

<style lang="stylus">
@import './tilesMap.styl'
</style>
